<template>
    <div class="directory-list-container">
        <div class="file-name">文件列表</div>
        <main>
            <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
                <template #default="{ node, data }">
                    <div class="list">
                        <div class="icon">
                            <SvgFolder :fill="['#FAE891', '#F6D259']" />
                        </div>
                        <div class="title">{{ data.label }}</div>
                    </div>
                </template>
            </el-tree>
        </main>
        <div class="fixed-btn">
            <div class="list" v-for="item in fixedBtn" :key="item.title">
                <component :is="item.svg" :fill="item.fill"></component>
                <span>{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SvgShare, SvgStar, SvgDelete, SvgFolder } from "@/components"
const fixedBtn = [
    { title: "收藏夹", svg: SvgStar, fill: ["#f57933ff", "#fbc99eff"] },
    { title: "分享记录", svg: SvgShare, fill: ["#0052F5", "#5B9AF9"] },
    { title: "回收站", svg: SvgDelete, fill: ["#FA5050", "#FDB3AB"] },
]
const data: Tree[] = [
    {
        label: "Level one 1",
        id: "id-1",
        children: [
            {
                label: "Level two 1-1",
                children: [
                    {
                        label: "Level three 1-1-1",
                    },
                ],
            },
        ],
    },
    {
        label: "Level one 2",
        children: [
            {
                label: "Level two 2-1",
                children: [
                    {
                        label: "Level three 2-1-1",
                    },
                ],
            },
            {
                label: "Level two 2-2",
                children: [
                    {
                        label: "Level three 2-2-1",
                    },
                ],
            },
        ],
    },
    {
        label: "Level one 3",
        children: [
            {
                label: "Level two 3-1",
                children: [
                    {
                        label: "Level three 3-1-1",
                    },
                ],
            },
            {
                label: "Level two 3-2",
                children: [
                    {
                        label: "Level three 3-2-1",
                    },
                ],
            },
        ],
    },
]
const defaultProps = {
    children: "children",
    label: "label",
    class: (data, node) => {
        if (!data?.children?.length) {
            return "node-children"
        }
    }
}

function handleNodeClick() { }
</script>

<style lang="scss" scoped>
.directory-list-container {
    padding: 0 24px;
    height: 100%;

    .file-name {
        width: 286px;
        height: 64px;
        border-bottom: 1px solid #f3f4f5ff;
        color: #1c2029ff;
        font-size: 16px;
        font-weight: 400;
        font-family: "Microsoft YaHei UI";
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    main {
        height: calc(100% - 64px - 168px);
        overflow-y: auto;

        :deep(.el-tree) {
            height: 100%;

            .node-children {
                .el-icon {
                    opacity: 0;
                }
            }

            .is-current {
                border-radius: 2px;

                &>.el-tree-node__content {
                    background: #e8f4ffff;

                    .list {
                        .title {
                            color: #0052f5ff;
                            font-size: 14px;
                            font-weight: 700;
                            font-family: "Microsoft YaHei UI";
                        }
                    }
                }
            }

            .el-tree-node__content {
                height: 48px;
                display: flex;
                align-items: center;

                .el-icon {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #4E5766;
                }

                .list {
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .title{
                        transition: all .15s;
                    }

                    svg {
                        width: 20px;
                        height: 20px;
                        margin: 0 8px;
                    }
                }
            }
        }
    }

    .fixed-btn {
        color: #1c2029ff;
        font-size: 14px;
        font-weight: 700;
        font-family: "Microsoft YaHei UI";
        margin: 28px 0;

        .list {
            display: flex;
            align-items: center;
            padding: 0 28px;
            cursor: pointer;

            svg {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }

            &+.list {
                margin-top: 20px;
            }
        }
    }
}
</style>
